import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class BottomAppBarPage extends StatefulWidget {
  const BottomAppBarPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _BottomAppBarPageState();
  }
}

class _BottomAppBarPageState extends State<BottomAppBarPage> {
  bool _showFab = true;
  bool _showNotch = true;

  FloatingActionButtonLocation _fabLocation =
      FloatingActionButtonLocation.endDocked;

  _onShowNotchChanged(bool value) {
    setState(() {
      _showNotch = value;
    });
  }

  _onShowFabChanged(bool value) {
    setState(() {
      _showFab = value;
    });
  }

  _onFabLocationChanged(FloatingActionButtonLocation? value) {
    setState(() {
      _fabLocation = value ?? FloatingActionButtonLocation.endDocked;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false, //隐藏左边的返回按钮
        title: const Text("BottomAppBarPage"),
      ),
      body: ListView(
        padding: const EdgeInsets.only(bottom: 88),
        children: [
          SwitchListTile(
              title: const Text("Show Floating Action Button"),
              value: _showFab,
              onChanged: _onShowFabChanged),
          SwitchListTile(
              title: const Text("Notch Mode"),
              value: _showNotch,
              onChanged: _onShowNotchChanged),
          const Padding(
            padding: EdgeInsets.all(16),
            child: Text("Floating action button position"),
          ),
          RadioListTile<FloatingActionButtonLocation>(
              title: const Text("endDocked"),
              value: FloatingActionButtonLocation.endDocked,
              groupValue: _fabLocation,
              onChanged: _onFabLocationChanged),
          RadioListTile(
              title: const Text("centerDocked"),
              value: FloatingActionButtonLocation.centerDocked,
              groupValue: _fabLocation,
              onChanged: _onFabLocationChanged),
          RadioListTile(
              title: const Text("centerFloat"),
              value: FloatingActionButtonLocation.centerFloat,
              groupValue: _fabLocation,
              onChanged: _onFabLocationChanged),
          RadioListTile(
              title: const Text("endFloat"),
              value: FloatingActionButtonLocation.endFloat,
              groupValue: _fabLocation,
              onChanged: _onFabLocationChanged)
        ],
      ),
      floatingActionButton: _showFab
          ? FloatingActionButton(
              onPressed: () {},
              tooltip: "Add",
              child: const Icon(Icons.add),
            )
          : null,
      floatingActionButtonLocation: _fabLocation,
      bottomNavigationBar: _BottomAppBarView(
          fabLocation: _fabLocation,
          shape: _showNotch ? const CircularNotchedRectangle() : null),
    );
  }
}

class _BottomAppBarView extends StatelessWidget {
  final NotchedShape? shape;
  final FloatingActionButtonLocation fabLocation;
  static final List<FloatingActionButtonLocation> centerLocations =
      <FloatingActionButtonLocation>[
    FloatingActionButtonLocation.centerFloat,
    FloatingActionButtonLocation.centerDocked,
  ];

  const _BottomAppBarView(
      {this.fabLocation = FloatingActionButtonLocation.centerDocked,
      this.shape = const CircularNotchedRectangle()});

  bool isAddBtnCenter() {
    return centerLocations.contains(fabLocation);
  }

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      shape: shape,
      color: Colors.blue,
      child: IconTheme(
          data: IconThemeData(color: Theme.of(context).colorScheme.onPrimary),
          child: Row(
            children: <Widget>[
              IconButton(
                  tooltip: 'menu',
                  onPressed: () {},
                  icon: const Icon(Icons.menu)),
              if (centerLocations.contains(fabLocation)) const Spacer(),
              IconButton(
                  tooltip: 'search',
                  onPressed: () {},
                  icon: const Icon(Icons.search)),
              IconButton(
                  tooltip: 'favorite',
                  onPressed: () {},
                  icon: const Icon(Icons.favorite)),
            ],
          )),
      // child: IconTheme(),
    );
  }
}
